<script setup lang="ts">
import {
  ElInput,
  ElSelect,
  ElSwitch,
  ElRadioGroup,
  ElDatePicker,
} from 'element-plus'
import { PropType } from 'vue'

const props = defineProps({
  config: {
    type: Object as PropType<any>,
    default() {
      return {}
    },
  },
  dateFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss', // X标识传值为10位时间戳，x标识传值为13位时间戳
  },
  extraParams: {
    type: Object,
    default() {
      return {}
    },
  },
})
const start_Date = (time: Date) => {
  if (props.config.form.endTime != '' && props.config.form.endTime != null) {
    return (
      time.getTime() > Date.now() || time.getTime() >= props.config.form.endTime
    )
  } else {
    return time.getTime() > Date.now()
  }
}

const end_Date = (time: Date) => {
  return (
    time.getTime() <= props.config.form.startTime || time.getTime() > Date.now()
  )
}

const disabled_date = (time: Date, col: any) => {
  if (col.el != 'datePicker') return
  if (col.key == 'startTime') {
    start_Date(time)
  } else if (col.key == 'endTime') {
    end_Date(time)
  }
}

const compsMap: { [key: string]: any } = shallowRef({
  input: ElInput,
  select: ElSelect,
  switch: ElSwitch,
  radio: ElRadioGroup,
  span: 'span',
  datePicker: ElDatePicker,
})

// const maxInputNumber = computed(() => {
//   if (props.config.inputNumber > 0) {
//     return props.config.inputNumber
//   } else if (props.config.input.length != undefined) {
//     let max = 4
//     props.config.input.forEach((d: any) => {
//       console.log('max < d.length', max, d.label.length)
//       max = max < d.label.length ? d.label.length : max
//     })
//     console.log('====max', max)
//     console.log(
//       'max======',
//       Object.assign([], props.config.input).sort(
//         (a: any, b: any) => a.label.length > b.label.length
//       )
//     )

//     return max > 4 ? max : 4
//   } else {
//     return 4
//   }
// })
</script>

<template>
  <el-form
    v-if="config.form"
    class="js-toolbar"
    ref="formRef"
    :model="config.form"
  >
    <template v-for="(col, index) in config.input" :key="index">
      <el-form-item
        class="toolbar-item"
        v-if="!col.hidden"
        :prop="col.key"
        :class="{
          'no-lable': col.label == undefined || col.label.length == 0,
        }"
      >
        <template #label>
          <span class="js-form-label">{{
            col.label && col.label.length > 0 ? col.label + ':' : ''
          }}</span>
        </template>
        <slot :name="col.key" :col="col" :value="config.form[col.key]">
          <component
            :is="compsMap[col.el]"
            @change="col.event"
            v-model="config.form[col.key]"
            :placeholder="col.placeholder"
            :disabled-date="(date:Date)=>{disabled_date(date,col)}"
            :value-format="dateFormat"
            :type="col.el == 'datePicker' ? col.type : null"
            :start-placeholder="col.el == 'datePicker' ? '开始时间':null"
            :end-placeholder="col.el == 'datePicker' ? '结束时间':null"
          >
            <template v-if="col.el == 'select'">
              <el-option
                v-for="item in col.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </template>
            <template v-if="col.el == 'radio'">
              <el-radio
                v-for="item in col.options"
                :key="item.value"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </template>
            <template v-if="col.el == 'span'">
              {{ config.form[col.key] }}
            </template>
          </component>
        </slot>
      </el-form-item>
    </template>

    <div class="btns" v-if="config.btns">
      <el-button
        v-for="btn in config.btns"
        :key="btn.label"
        :type="btn.type ? btn.type : 'primary'"
        @click="($event:any) => btn.event({ ...config.form,...extraParams },$event)"
        :icon="btn.icon"
        size="small"
        >{{ btn.label }}</el-button
      >
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.js-toolbar {
  width: 100%;
  //height: 100%;
  display: flex;
  background-color: #fff;
  .toolbar-item {
    margin: 0;
    :deep(.el-input) {
      width: 180px !important;
    }
    :deep(.el-select) {
      width: 180px !important;
    }
  }
  .no-lable {
    :deep(.el-form-item__label) {
      display: none !important;
    }
  }
  :deep(.el-form-item__label) {
    font-size: 13px !important;
    padding: 0;
  }
  .btns {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
:deep(.el-input__wrapper) {
  margin: 0 10px;
}
</style>
